// 用户个人资料-用户信息
var base = Vue.component('base', {
    data () {
        return {
            isEdit: false,          // 是否编辑
            dialogImageUrl: '',     // 用户上传的图片
            dialogVisible: false,   // 用户形象
            eduData: [              // 教育的选项
                { value: 1, label: '小学' },
                { value: 2, label: '初中' },
                { value: 3, label: '高中/中专/职高' },
                { value: 4, label: '本科' },
                { value: 5, label: '研究生' },
                { value: 6, label: '博士' },
                { value: 7, label: '其他' }
            ],
            marryData: [            // 婚姻状况的选项
                { value: 1, label: '未婚' },
                { value: 2, label: '已婚' },
                { value: 3, label: '离异' },
                { value: 4, label: '丧偶' }
            ],
            houseData: [            // 住宿需要
                { value: 'xuyao', label: '需要' },
                { value: 'buxuyao', label: '不需要' }
            ],
            userInfo: {}
        }
    },
    created() {
        // 获取用户信息
        this.getUserInfo();
    },
    methods: {
        getUserInfo() {
            // 获取用户信息
            var self = this;
            $.ajax({
                type:"POST",
                url: _UrlPrefix + "/api/member/staff/show",
             /*   xhrFields: {
                withCredentials: true
                },*/
                data: {
                    app_access: _AppAccess,
                    token: localStorage.getItem('token')
                },
                success:function(res){
                    if(0 == res.code) {
                        console.log("res: ", res)
                        self.userInfo = res.data;
                    }
                }
            })
        },
        onBackFun() {
            this.isEdit = false;
            // 获取用户信息
            this.getUserInfo();
        },
        onEditFun () {
            this.isEdit = true;
        },
        onSaveEdit () {
            // 保存设置
            console.log("保存设置");
            let self = this;
            // this.userInfo.image = this.dialogImageUrl;
            let _data = {
                app_access: _AppAccess,
                token: "不使用",
                "staffInfos[jobType]": this.userInfo.job,
                "staffInfos[job_str]": this.userInfo.job_str,
                "staffInfos[realname]": this.userInfo.realname,
                "staffInfos[sex]": this.userInfo.sex,
                "staffInfos[birth]": this.userInfo.birth,
                "staffInfos[edu]": this.userInfo.edu,
                "staffInfos[weight]": this.userInfo.weight,
                "staffInfos[polity]": this.userInfo.polity,
                "staffInfos[origin]": this.userInfo.origin,
                "staffInfos[nation]": this.userInfo.nation,
                "staffInfos[marry]": this.userInfo.marry,
                "staffInfos[idcard]": this.userInfo.idcard,
                "staffInfos[house]": this.userInfo.house,
                "staffInfos[xxz]": this.userInfo.image,
                "staffInfos[address]": this.userInfo.houseAddress,
                "staffInfos[live]": this.userInfo.liveAddress,
                "staffInfos[person]": this.userInfo.contactPerson,
                "staffInfos[mobile]": this.userInfo.contactMobile,
                "staffInfos[salary]": this.userInfo.salary
            }
            $.ajax({
                type:"POST",
                url: _UrlPrefix + "/api/member/staff/modify",
                xhrFields: {
                  withCredentials: true
                },
                data: _data,
                success:function(res){
                    console.log(res)
                    if(0 == res.code) {
                        console.log("res: ", res)
                        self.isEdit = false;
                    }
                }
            })
            // this.isEdit = false;
        },
        handleChange(response, file, fileList) {
            // 获取上传的资源
            this.dialogImageUrl = file[0].url;
            console.log("response: ", response);
            console.log("file: ", file);
            console.log("fileList: ", fileList);
        },
        handleRemove(file, fileList) {
            // 删除上传的形象照
            console.log(file, fileList);
        },
        handlePictureCardPreview (file) {
            // 形象照的预览
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    },
    template: ` <div class="data-base">
                    <template v-if="isEdit">
                        <div class="content">
                            <div class="contents">
                                <div class="second-title">姓名：</div>
                                <input type="text" v-model="userInfo.realname"/>
                            </div>
                            <div class="contents">
                                <div class="second-title">性别：</div>
                                <input type="text" v-model="userInfo.sexName"/>
                            </div>
                            <div class="contents">
                                <div class="second-title">出生日期：</div>
                                <el-date-picker v-model="userInfo.birth" type="date" placeholder="选择日期"></el-date-picker>
                                
                            </div>
                            <div class="contents">
                                <div class="second-title">形象照上传：</div>
                                <el-upload
                                    action="/"
                                    list-type="picture-card"
                                    :limit="1"
                                    :auto-upload="false"
                                    :on-change="handleChange"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible">
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog>
                            </div>
                            <div class="contents">
                                <div class="second-title">最高学历：</div>
                                <el-select v-model="userInfo.edu" placeholder="请选择">
                                    <el-option
                                        v-for="item in eduData"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="contents">
                                <div class="second-title">身份证号码：</div>
                                <input type="text" v-model="userInfo.idcard"/>
                            </div>
                            <div class="contents">
                                <div class="second-title">体重：</div>
                                <input type="text" v-model="userInfo.weight" />
                            </div>
                            <div class="contents">
                                <div class="second-title">户口地址：</div>
                                <input type="text" v-model="userInfo.houseAddress"/>
                            </div>
                            <div class="contents">
                                <div class="second-title">政治面貌：</div>
                                <input type="text" v-model="userInfo.polityName" />
                            </div>
                            <div class="contents">
                                <div class="second-title">现住地址：</div>
                                <input type="text" v-model="userInfo.liveAddress" />
                            </div>
                            <div class="contents">
                                <div class="second-title">籍贯：</div>
                                <input type="text" v-model="userInfo.origin"/>
                            </div>
                            <div class="contents">
                                <div class="second-title">紧急联系人：</div>
                                <input type="text" v-model="userInfo.contactPerson"/>
                            </div>
                            <div class="contents">
                                <div class="second-title">民族：</div>
                                <input type="text" v-model="userInfo.nation"/>
                            </div>
                            <div class="contents">
                                <div class="second-title">紧急电话：</div>
                                <input type="text" v-model="userInfo.contactMobile"/>
                            </div>
                            <div class="contents">
                                <div class="second-title">婚姻状况：</div>
                                <el-select v-model="userInfo.marry" placeholder="请选择">
                                    <el-option
                                        v-for="item in marryData"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="contents">
                                <div class="second-title">期望月薪：</div>
                                <input type="text" v-model="userInfo.salary" />
                            </div>
                            <div class="contents">
                                <div class="second-title">住宿情况：</div>
                                <el-select v-model="userInfo.house" placeholder="请选择">
                                    <el-option
                                        v-for="item in houseData"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="contents">
                                <div class="second-title">专业技能：</div>
                                <input type="text" v-model="userInfo.skillStr"/>
                            </div>
                            <div class="contents">
                                <div class="second-title">职位：</div>
                                <input type="text" v-model="userInfo.job_str" value=""/>
                            </div>
                            <div class="contents">
                                <div class="second-title">特长爱好：</div>
                                <input type="text" v-model="userInfo.hobbyStr"/>
                            </div>
                        </div>
                        <div class="btns">
                            <button class="btn btn-save" @click="onBackFun">返回</button>
                            <button class="btn btn-primary" @click="onSaveEdit">保存设置</button>
                        </div>
                    </template>
                

                    <template v-else>
                        <div class="content">
                            <div class="contents">
                                <div class="second-title">姓名：</div>
                                <div class="second-content">{{userInfo.realname}}</div>
                            </div>
                            <div class="contents">
                                <div class="second-title">性别：</div>
                                <div class="second-content">{{userInfo.sexName}}</div>
                            </div>
                            <div class="contents">
                                <div class="second-title">出生日期：</div>
                                <div class="second-content">{{userInfo.birth}}</div>
                            </div>
                            <div class="contents">
                                <div class="second-title">形象照上传：</div>
                                <img :src="userInfo.image" />
                            </div>
                            <div class="contents">
                                <div class="second-title">最高学历：</div>
                                <div class="second-content">{{userInfo.edu}}</div>
                            </div>
                            <div class="contents">
                                <div class="second-title">身份证号码：</div>
                                <div class="second-content">{{userInfo.idcard}}</div>
                            </div>
                            <div class="contents">
                                <div class="second-title">体重：</div>
                                <div class="second-content">{{userInfo.weight}}</div>
                            </div>
                            <div class="contents">
                                <div class="second-title">户口地址：</div>
                                <div class="second-content">{{userInfo.houseAddress}}</div>
                            </div>
                            <div class="contents">
                                <div class="second-title">政治面貌：</div>
                                <div class="second-content">{{userInfo.polityName}}</div>
                            </div>
                            <div class="contents">
                                <div class="second-title">现住地址：</div>
                                <div class="second-content">{{userInfo.liveAddress}}</div>
                            </div>
                            <div class="contents">
                                <div class="second-title">籍贯：</div>
                                <div class="second-content">{{userInfo.origin}}</div>
                            </div>
                            <div class="contents">
                                <div class="second-title">紧急联系人：</div>
                                <div class="second-content">{{userInfo.contactPerson}}</div>
                            </div>
                            <div class="contents">
                                <div class="second-title">民族：</div>
                                <div class="second-content">{{userInfo.nation}}</div>
                            </div>
                            <div class="contents">
                                <div class="second-title">紧急电话：</div>
                                <div class="second-content">{{userInfo.contactMobile}}</div>
                            </div>
                            <div class="contents">
                                <div class="second-title">婚姻状况：</div>
                                <div class="second-content">{{userInfo.marryName}}</div>
                            </div>
                            <div class="contents">
                                <div class="second-title">期望月薪：</div>
                                <div class="second-content">{{userInfo.salary}}</div>
                            </div>
                            <div class="contents">
                                <div class="second-title">住宿情况：</div>
                                <div class="second-content">{{userInfo.house == 'xuyao' ? '需要' : '不需要'}}</div> 
                            </div>
                            <div class="contents">
                                <div class="second-title">专业技能：</div>
                                <div class="second-content">{{userInfo.skillStr}}</div> 
                            </div>
                            <div class="contents">
                                <div class="second-title">职位：</div>
                                <div class="second-content">{{userInfo.job_str}}</div> 
                            </div>
                            <div class="contents">
                                <div class="second-title">特长爱好：</div>
                                <div class="second-content">{{userInfo.hobbyStr}}</div> 
                            </div>
                        </div>
                        <div class="btns">
                            <button class="btn btn-primary" @click="onEditFun">编辑</button>
                        </div>
                    </template> 
                </div>`
})